<?php session_start();

include 'php/conn.php';

$member = $_SESSION['member'];


$user = mysql_query("SELECT * FROM members WHERE username = '". $member ."' limit 1");
while($row = mysql_fetch_array($user))
  {
  	$user_id = $row['id'];
  }

$_SESSION['userId']=$user_id;
$result = mysql_query("SELECT * FROM beers");

$userBeerId = array();
$userBeerRating = array();

$userBeers = mysql_query("SELECT beer_id, rating FROM beers_drank WHERE user_id = $user_id");

while($row = mysql_fetch_array($userBeers))
  {
	array_push($userBeerId, $row['beer_id']);
	array_push($userBeerRating, $row['rating']);
  }
  
?><!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!--VIEWPORT META-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

<meta name="apple-mobile-web-app-capable" content="yes">

<link href="css/touchscroll.css" rel="stylesheet">

<title>Beer Ticks Mobile App Beer List</title>

<!-- CSS stylesheets -->
    <link type="text/css" href="css/master.css" rel="stylesheet"/>

<!--WEBFONTS-->
	<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>    
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'/>
<!--JAVASCRIPT-->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="js/scripts.js"></script>
	
	
	<script type="text/javascript">
	$(document).ready(function() {
		
		//send beer id to details page
		$('.listRow').click(function() {
			var id = $(this).attr('rel');
			window.location = 'beer.php?id='+id;
		});
		
		//$('#masterlist').liveFilter(basic);
		$('#search').keypress(function(e) {
			if(e.keyCode==13) {
			searchField();
			}
		});
	
		$('#searchEnter').click(function() {
			searchField();
		});
	});
	
	</script>
    
</head>

<body>

	<!--SITE WRAPPER-->
	<div id="siteWrapper">
		
		<!--LIST WRAPPER-->
		<div class="listWrapper">
        <!--SEARCH BOX-->
        <div class="inputWrapper"><input id="search" type="text" name="liveFilter" class="filter" />
	        <!--<button type="submit" id="searchEnter" value="submit" style="border: 0; background: transparent">
			</button>-->
		</div>
        	<div class="listContainer">
				<!--LIST-->
				<ul class="list" id="masterList">
					<?php
						while($row = mysql_fetch_array($result))
						  {
							   
						?>	
	                    <li rel="<?php echo $row['beerID']; ?>" class="listRow">
	                  		<div class="specificBeerRow">
	                        	
	                        	<div class="beerName"><?php echo $row['beerName']; ?></div>
	                        	<div class="specificBeerBottom">
	                        <?php $index = array_search( $row['beerID'],$userBeerId);
								
							  if($index !== FALSE){ $rating=$userBeerRating[$index];?>
		                        	<div class="listPageRatingWrapper"><script type="text/javascript"> document.write(getStars(<?php echo $rating; ?>));</script></div>
		                        	<div class="listRatingNumbers"> <?php echo $rating;?></div>
		                            <div class="checkmarkOn"></div><?php } else { ?>
		                            <div class="listPageRatingWrapper"><script type="text/javascript"> document.write(getStars(0));</script></div><?php } ?>
		                        </div>    
	                   		</div>
						  	
						</li>
					 <?php }?>
				</ul><!--/LIST-->

			</div><!--/LIST CONTAINER-->
		</div><!--/LIST WRAPPER-->
	</div><!--/SITE WRAPPER-->
<script type="text/javascript" src="js/touchscroll.min.js"></script>
<script>
$(document).ready(function() {
var scrollNode = document.querySelector(".scroller"), options = {};
var scroller = new TouchScroll(scrollNode, options);
});
</script>

</body>
</html>
